<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>档案管理系统</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/dist/css/ionicons.min.css">
    <link rel="stylesheet" href="/static/dist/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/static/dist/css/skins/all-skins.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-treeview.css">
    <link rel="stylesheet" href="/static/css/bootstrapValidator.min.css">
    <link rel="stylesheet" href="/static/css/bootstrap-table.min.css">
    <link rel="stylesheet" href="/static/layer/theme/default/layer.css">
    <link rel="stylesheet" href="/static/webCss/jysh.css?v=shujubuwqd12138">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="/static/plugins/ie9/html5shiv.min.js"></script>
    <script src="/static/plugins/ie9/respond.min.js"></script>
    <![endif]-->
</head>
<body class="hold-transition skin-blue" style="font-size: medium">

<div class="content row" id="yhgl">
    <div class="modal" id="jydaDiv" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content" style="width: 147%;margin-left: -27%;">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">借阅审核</h4>
                </div>
                <div class="modal-body row" style="height: 500px">
                    <div class="col-xs-5">
                        <div style="height: 450px;overflow: auto">
                            <div id="tree"></div>
                        </div>
                    </div>
                    <div class="col-xs-7">
                        <form role="form" id="userForm">
                            <div class="form-inline col-xs-offset-3" style="margin-bottom: 20px;">
                                <label>档案编号:</label>
                                <label name="dabh" class="" style="width: 300px;">{{jyxx.dabh}}</label>
                            </div>
                            <div class="form-inline col-xs-offset-3" style="margin-bottom: 20px">
                                <label>案卷题名:</label>
                                <label class="" name="damc" style="width: 300px;">{{jyxx.damc}}</label>
                            </div>
                            <div class="form-inline col-xs-offset-3" style="margin-bottom: 20px">
                                <label>大厅受理编号:</label>
                                <label class="" name="dtslbh" style="width: 300px;">{{jyxx.dtslbh}}</label>
                            </div>
                            <div class="form-inline col-xs-offset-3" style="margin-bottom: 20px">
                                <label>借阅原因:</label>
                                <textarea name="jyyy" v-model="jyxx.jyyy" class="form-control" readonly style="width: 300px;"></textarea>
                            </div>
                            <div class="form-inline col-xs-offset-3" style="margin-bottom: 20px">
                                <label>借阅人:&nbsp&nbsp&nbsp</label>
                                <input name="jyr" class="form-control" type="text" readonly v-model="jyxx.jyr" style="width: 300px;">
                            </div>
                            <div class="form-inline col-xs-offset-3" style="margin-bottom: 20px">
                                <label>借阅时限:</label>
                                <select name="jysx" class="form-control" v-model="jyxx.jysx" style="width: 100px;">
                                    <option value="5">五天</option>
                                    <option value="10">十天</option>
                                    <option value="15">十五天</option>
                                    <option value="20">二十天</option>
                                    <option value="30">三十天</option>
                                </select>
                            </div>
                        </form>
                    </div>
                </div>
                <div class="modal-footer" style="padding: 10px">
                    <div class="text-center">
                        <button type="button" class="btn btn-primary" @click="tgsq" style="width: 94px;height: 36px;background-color: #2C72E8">同意申请</button>
                        <button type="button" class="btn btn-default" @click="btgsq" style="width: 94px;height: 36px">退回</button>
                    </div>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div class="modal" id="pljydaDiv" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">借阅审核</h4>
                </div>
                <div class="modal-body row text-center" style="height: 300px">
                    <label>审核是否通过？</label>
                </div>
                <div class="modal-footer" style="padding: 10px">
                    <div class="text-center">
                        <button type="button" class="btn btn-primary" @click="tgsqpl" style="width: 94px;height: 36px;background-color: #2C72E8">同意申请</button>
                        <button type="button" class="btn btn-default" @click="btgsqpl" style="width: 94px;height: 36px">退回</button>
                    </div>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>
    <div id="addtool" class="btn-group form-inline">
    </div>
    <div class=" col-xs-12" style="padding-right: 0px;padding-left: 0px">
        <div>
            <div class="col-xs-12 left">
                <div class="row" style="height: 54px;border-bottom: 1px solid #E0E0E0">
                    <label class="col-xs-4" style="color: #3A3A3A;font-weight: 600;padding-top: 17px;font-size: 16px">借阅基本信息</label>
                    <div class="btn-group col-xs-offset-3" style="padding-top: 0.75%;">
                        <a class="btn btn-primary" style="background-color: #2C75E8;width: 92px;height: 28px;border-radius:2px 0px 0px 2px;padding: 2px;margin-left: 520px;" @click="plsh">批量审核</a>
                    </div>
                </div>
                <div class="box-body">
                    <table class="table table-bordered table-hover text-center" id="userTable">

                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/static/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<!-- Slimscroll -->
<script src="/static/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/static/plugins/fastclick/fastclick.js"></script>

<!-- AdminLTE App -->
<script src="/static/dist/js/app.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/static/dist/js/demo.js"></script>
<!--tabs-->
<script src="/static/dist/js/app_iframe.js"></script>
<script src="/static/js/bootstrap-treeview.js"></script>
<script src="/static/js/bootstrapValidator.min.js"></script>
<script src="/static/js/bootstrap-table.min.js"></script>
<script src="/static/js/bootstrap-table-zh-CN.js"></script>
<script src="/static/js/vue.js"></script>
<script src="/static/js/vue-resource.min.js"></script>
<script src="/static/layer/layer.js"></script>
<script src="/static/js/myJs.js?v=shujubuwqd12138"></script>
<script src="/static/js/newJs.js?v=shujubuwqd12138"></script>

<script type="text/javascript">
    newCss("/static/webCss/jysh.css");
    var type;
    function paramsMatter(value,row,index) {
        var span=document.createElement('span');
        span.setAttribute('title',value);
        span.innerHTML = value;
        return span.outerHTML;
    }

    function shJm(id) {
        $.get("/jy/api/queryJyspId?id="+id, function(result) {
            if (result.code == 200) {
                var data = result.data;
                vue.$data.jyxx = data.dajy;
                $('#tree').treeview({
                    color: "#428bca",
                    highlightSelected:false,     //是否选中高亮显示
                    onhoverColor: "#f5f5f5",    //鼠标滑过的颜色
                    levels: 0 ,                 //设置初始化展开几级菜单 默认为2
                    showBorder:true,                //是否显示边框
                    showCheckbox:false,              //是否显示多选框
                    data:data.lxNodeList,
                });
                $('#jydaDiv').modal('show');
            }
        });
    }

    var vue = new Vue({
        el: '#yhgl',
        data: {
            ids:[],
            allShy:null,
            keyword:null,
            zt:-1,
            allRole:null,
            jyxx:{
                id:null,
                jyyy:null,
                jysx:null,
                dabh:null,
                jyrLxdh:null,
                jyr:null,
                shrLxdh:null,
                shrId:null,
                shr:null,
                damc:null,
                dalx:null,
            },
        },
        methods: {
            //同意批量申请
            tgsqpl:function(){
                var myMsg = cxLoad("批量审核中");
                this.$http.get('/jy/api/JyBatchsp?type=1&ids='+this.ids).then(function (res) {
                    var data = res.data;
                    if(data.code == 200){
                        layer.close(myMsg);
                        cxAlertOk("审核通过");
                        $('#pljydaDiv').modal('hide');
                        this.ids = [];
                        $("#userTable").bootstrapTable('destroy');
                        $('#userTable').bootstrapTable({
                            url: '/jy/api/queryJysp?zt=0',
                            // contentType: "application/json; charset=UTF-8",
                            type: "GET",
                            dataType: 'json',
                            queryParamsType: "",
                            sortName : 'sqsj',
                            sortOrder : 'desc',
                            singleSelect: false,
                            striped: true,
                            smartDisplay: false,
                            cache: false,
                            pagination:true,  //设置为 true 会在表格底部显示分页条。
                            paginationLoop:false, //设置为 true 启用分页条无限循环的功能。
                            pageSize:10,//每页初始显示的条数
                            pageList:[10],
                            toolbar: "#addtool",
                            sidePagination: 'server',
                            queryParams: function (params) {
                                return {'pageNum':params.pageNumber,'pageSize':params.pageSize,'sort':params.sortOrder};
                            },
                            toolbar: "#addtool",
                            columns: [
                                {
                                    checkbox:true,
                                }, {
                                    field: 'dabh',
                                    title: '档案编号',
                                    formatter:paramsMatter
                                }, {
                                    field: 'damc',
                                    title: '案卷题名',
                                    formatter:paramsMatter
                                }, {
                                    field: 'dtslbh',
                                    title: '大厅受理编号',
                                    formatter:paramsMatter
                                }, {
                                    field: 'jysx',
                                    title: '借阅天数',
                                    formatter:paramsMatter
                                }, {
                                    field: 'jyyy',
                                    title: '借阅原因',
                                    formatter:paramsMatter,
                                }, {
                                    field: 'cz',
                                    title: '操作',
                                    formatter: function (value, row, index) {
                                        if(row.zt == 0){
                                            var str = "<a class='jysh' href='javascript:shJm("+row.id+")'>借阅审核</a>";
                                            return str;
                                        }else{
                                            var str = "<a class='jysh' disabled>借阅审核</a>";
                                            return str;
                                        }

                                    }
                                }],
                            responseHandler: function (res) {  //后台返回的结果
                                if (res.code == "200") {
                                    var data = res.data;
                                    var NewData = [];
                                    for(i=0;i<data.data.length;i++){
                                        NewData.push(data.data[i]);
                                    }
                                    var data = {
                                        rows: NewData,
                                        total:data.total
                                    };
                                    return data;
                                }
                            }
                        });
                    }else {
                        cxAlert(data.mess);
                    }
                })
            },
            //不同意批量申请
            btgsqpl:function(){
                var myMsg = cxLoad("退回中");
                this.$http.get('/jy/api/JyBatchsp?type=2&ids='+this.ids).then(function (res) {
                    var data = res.data;
                    if(data.code == 200){
                        layer.close(myMsg);
                        cxAlertOk("已退回");
                        $('#pljydaDiv').modal('hide');
                        this.ids = [];
                        $("#userTable").bootstrapTable('destroy');
                        $('#userTable').bootstrapTable({
                            url: '/jy/api/queryJysp?zt=0',
                            // contentType: "application/json; charset=UTF-8",
                            type: "GET",
                            dataType: 'json',
                            queryParamsType: "",
                            sortName : 'sqsj',
                            sortOrder : 'desc',
                            singleSelect: false,
                            striped: true,
                            smartDisplay: false,
                            cache: false,
                            pagination:true,  //设置为 true 会在表格底部显示分页条。
                            paginationLoop:false, //设置为 true 启用分页条无限循环的功能。
                            pageSize:10,//每页初始显示的条数
                            pageList:[10],
                            toolbar: "#addtool",
                            sidePagination: 'server',
                            queryParams: function (params) {
                                return {'pageNum':params.pageNumber,'pageSize':params.pageSize,'sort':params.sortOrder};
                            },
                            toolbar: "#addtool",
                            columns: [
                                {
                                    checkbox:true,
                                }, {
                                    field: 'dabh',
                                    title: '档案编号',
                                    formatter:paramsMatter
                                }, {
                                    field: 'damc',
                                    title: '案卷题名',
                                    formatter:paramsMatter
                                }, {
                                    field: 'dtslbh',
                                    title: '大厅受理编号',
                                    formatter:paramsMatter
                                }, {
                                    field: 'jysx',
                                    title: '借阅天数',
                                    formatter:paramsMatter
                                }, {
                                    field: 'jyyy',
                                    title: '借阅原因',
                                    formatter:paramsMatter,
                                }, {
                                    field: 'cz',
                                    title: '操作',
                                    formatter: function (value, row, index) {
                                        if(row.zt == 0){
                                            var str = "<a class='jysh' href='javascript:shJm("+row.id+")'>借阅审核</a>";
                                            return str;
                                        }else{
                                            var str = "<a class='jysh' disabled>借阅审核</a>";
                                            return str;
                                        }

                                    }
                                }],
                            responseHandler: function (res) {  //后台返回的结果
                                if (res.code == "200") {
                                    var data = res.data;
                                    var NewData = [];
                                    for(i=0;i<data.data.length;i++){
                                        NewData.push(data.data[i]);
                                    }
                                    var data = {
                                        rows: NewData,
                                        total:data.total
                                    };
                                    return data;
                                }
                            }
                        });
                    }else {
                        cxAlert(data.mess);
                    }
                })
            },
            shrChange:function(){
                var shr = this.allShy.findIndex(item => item.id === this.jyxx.shrId);
                //this.jyxx.shrLxdh = this.allShy[shr].phone;
            },
            //批量审核
            plsh:function(){
                if(this.ids.length === 0){
                    cxAlert('请先选择要审核的档案')
                }else {
                    $('#pljydaDiv').modal('show');
                }

            },
            //查找
            cz:function(){
                var url;
                if(this.zt == -1){
                    this.zt = null;
                }
                $("#userTable").bootstrapTable('destroy');
                if(this.keyword == null && this.zt != null){
                    url = '/jy/api/queryJysp?zt='+this.zt;
                }else if(this.keyword != null && this.zt == null){
                    url = '/jy/api/queryJysp?keyword='+this.keyword;
                }else if(this.keyword == null && this.zt == null){
                    url = '/jy/api/queryJysp';
                }else {
                    url = '/jy/api/queryJysp?keyword='+this.keyword+'&zt='+this.zt;
                }
                //$("#userTable").bootstrapTable('destroy');
                $('#userTable').bootstrapTable({
                    url: url,
                    // contentType: "application/json; charset=UTF-8",
                    type: "GET",
                    dataType: 'json',
                    queryParamsType: "",
                    sortName : 'sqsj',
                    sortOrder : 'desc',
                    singleSelect: false,
                    striped: true,
                    smartDisplay: false,
                    cache: false,
                    pagination:true,  //设置为 true 会在表格底部显示分页条。
                    paginationLoop:false, //设置为 true 启用分页条无限循环的功能。
                    pageSize:10,//每页初始显示的条数
                    pageList:[10],
                    toolbar: "#addtool",
                    sidePagination: 'server',
                    queryParams: function (params) {
                        return {'pageNum':params.pageNumber,'pageSize':params.pageSize,'sort':params.sortOrder};
                    },
                    toolbar: "#addtool",
                    columns: [
                        {
                            checkbox:true,
                        }, {
                            field: 'dabh',
                            title: '档案编号',
                            formatter:paramsMatter
                        }, {
                            field: 'damc',
                            title: '案卷题名',
                            formatter:paramsMatter
                        }, {
                            field: 'dtslbh',
                            title: '大厅受理编号',
                            formatter:paramsMatter
                        }, {
                            field: 'jysx',
                            title: '借阅天数',
                            formatter:paramsMatter
                        }, {
                            field: 'jyyy',
                            title: '借阅原因',
                            formatter:paramsMatter,
                            formatter: function (value, row, index) {
                                return changeDateFormat(value)
                            }
                        }, {
                            field: 'cz',
                            title: '操作',
                            formatter: function (value, row, index) {
                                if(row.zt == 0){
                                    var str = "<a class='jysh' href='javascript:shJm("+row.id+")'>借阅审核</a>";
                                    return str;
                                }else{
                                    var str = "<a class='jysh' disabled>借阅审核</a>";
                                    return str;
                                }

                            }
                        }],
                    responseHandler: function (res) {  //后台返回的结果
                        if (res.code == "200") {
                            var data = res.data;
                            var NewData = [];
                            for(i=0;i<data.data.length;i++){
                                NewData.push(data.data[i]);
                            }
                            var data = {
                                rows: NewData,
                                total:data.total
                            };
                            return data;
                        }
                    }
                });
            },
            tgsq:function () {
                var id = this.jyxx.id;
                var myMsg = cxLoad("审批中");
                this.$http.get('/jy/api/Jysp?type=1&id='+id).then( function (result) {
                    var data = result.body;
                    if (data.code == 200) {
                        layer.close(myMsg);
                        cxAlertOk("审批成功!")
                        $('#jydaDiv').modal('hide');
                        this.getTable();
                        //top.refreshTab();
                    }
                });
            },
            btgsq:function () {
                var id = this.jyxx.id;
                var myMsg = cxLoad("退回中");
                this.$http.get('/jy/api/Jysp?type=2&id='+id).then( function (result) {
                    var data = result.body;
                    if (data.code == 200) {
                        layer.close(myMsg);
                        cxAlertOk("已退回!")
                        $('#jydaDiv').modal('hide');
                        this.getTable();
                        //top.refreshTab();
                    }
                });
            },
            //表格
            getTable:function () {
                $("#userTable").bootstrapTable('destroy');
                $('#userTable').bootstrapTable({
                    url: '/jy/api/queryJysp?zt=0',
                    // contentType: "application/json; charset=UTF-8",
                    type: "GET",
                    dataType: 'json',
                    queryParamsType: "",
                    sortName : 'sqsj',
                    sortOrder : 'desc',
                    singleSelect: false,
                    striped: true,
                    smartDisplay: false,
                    cache: false,
                    pagination:true,  //设置为 true 会在表格底部显示分页条。
                    paginationLoop:false, //设置为 true 启用分页条无限循环的功能。
                    pageSize:10,//每页初始显示的条数
                    pageList:[10],
                    toolbar: "#addtool",
                    sidePagination: 'server',
                    queryParams: function (params) {
                        return {'pageNum':params.pageNumber,'pageSize':params.pageSize,'sort':params.sortOrder};
                    },
                    toolbar: "#addtool",
                    columns: [
                        {
                            checkbox:true,
                        }, {
                            field: 'dabh',
                            title: '档案编号',
                            formatter:paramsMatter
                        }, {
                            field: 'damc',
                            title: '案卷题名',
                            formatter:paramsMatter
                        }, {
                            field: 'dtslbh',
                            title: '大厅受理编号',
                            formatter:paramsMatter
                        }, {
                            field: 'jysx',
                            title: '借阅天数',
                            formatter:paramsMatter
                        }, {
                            field: 'jyyy',
                            title: '借阅原因',
                            formatter:paramsMatter,
                        }, {
                            field: 'cz',
                            title: '操作',
                            formatter: function (value, row, index) {
                                if(row.zt == 0){
                                    var str = "<a class='jysh' href='javascript:shJm("+row.id+")'>借阅审核</a>";
                                    return str;
                                }else{
                                    var str = "<a class='jysh' disabled>借阅审核</a>";
                                    return str;
                                }

                            }
                        }],
                    responseHandler: function (res) {  //后台返回的结果
                        if (res.code == "200") {
                            var data = res.data;
                            var NewData = [];
                            for(i=0;i<data.data.length;i++){
                                NewData.push(data.data[i]);
                            }
                            var data = {
                                rows: NewData,
                                total:data.total
                            };
                            return data;
                        }
                    }
                });
            }
        },
        created: function () {
        },
        mounted: function () {
            var that = this;
            $("#userTable").bootstrapTable('destroy');
            $('#userTable').bootstrapTable({
                url: '/jy/api/queryJysp?zt=0',
                // contentType: "application/json; charset=UTF-8",
                type: "GET",
                dataType: 'json',
                queryParamsType: "",
                sortName : 'sqsj',
                sortOrder : 'desc',
                singleSelect: false,
                striped: true,
                smartDisplay: false,
                cache: false,
                pagination:true,  //设置为 true 会在表格底部显示分页条。
                paginationLoop:false, //设置为 true 启用分页条无限循环的功能。
                pageSize:10,//每页初始显示的条数
                pageList:[10],
                toolbar: "#addtool",
                sidePagination: 'server',
                queryParams: function (params) {
                    return {'pageNum':params.pageNumber,'pageSize':params.pageSize,'sort':params.sortOrder};
                },
                toolbar: "#addtool",
                columns: [
                    {
                        checkbox:true,
                    }, {
                    field: 'dabh',
                    title: '档案编号',
                    formatter:paramsMatter
                }, {
                    field: 'damc',
                    title: '案卷题名',
                    formatter:paramsMatter
                }, {
                    field: 'dtslbh',
                    title: '大厅受理编号',
                    formatter:paramsMatter
                }, {
                    field: 'jysx',
                    title: '借阅天数',
                    formatter:paramsMatter
                }, {
                    field: 'jyyy',
                    title: '借阅原因',
                    formatter:paramsMatter,
                }, {
                    field: 'cz',
                    title: '操作',
                    formatter: function (value, row, index) {
                        if(row.zt == 0){
                            var str = "<a class='jysh' href='javascript:shJm("+row.id+")'>借阅审核</a>";
                            return str;
                        }else{
                            var str = "<a class='jysh' disabled>借阅审核</a>";
                            return str;
                        }

                    }
                }],
                responseHandler: function (res) {  //后台返回的结果
                    if (res.code == "200") {
                        var data = res.data;
                        var NewData = [];
                        for(i=0;i<data.data.length;i++){
                            NewData.push(data.data[i]);
                        }
                        var data = {
                            rows: NewData,
                            total:data.total
                        };
                        return data;
                    }
                }
            });

            $('#userTable').on('check-all.bs.table', function (rowsAfter,rowsBefore) {
                var isPush = true;
                type = rowsBefore[0].dalxId;
                if(vue.$data.ids.length == 0){
                    for(var i = 0; i < rowsBefore.length;i++){
                        vue.$data.ids[i] = rowsBefore[i].id;
                    }
                }
                for(var z = 0;z<rowsBefore.length;z++){
                    for(var a = 0;a < vue.$data.ids.length;a++){
                        if(rowsBefore[z].id ==vue.$data.ids[a]){
                            vue.$data.ids[a] = rowsBefore[z].id;
                            isPush = false;
                            break;
                        }
                    }
                    if(isPush){
                        vue.$data.ids.push(rowsBefore[z].id);
                    }
                }
            });
            $('#userTable').on('uncheck-all.bs.table', function (e,rowsAfter,rowsBefore) {
                if (vue.$data.ids.length > 0) {
                    var list = [].concat(vue.$data.ids);
                    for(var e = 0;e < list.length;e++){
                        for(var c = 0;c<rowsBefore.length;c++){
                            if (vue.$data.ids[0] != undefined && rowsBefore[c].id == list[e]) {
                                vue.$data.ids.splice(vue.$data.ids.indexOf(list[e]),1);  // 删除元素并已undefined代替（方法固有）
                            }
                        }
                    }
                }
            });
            $('#userTable').on('check.bs.table', function (e, row) {
                if (row != undefined) {
                    //vue.$data.pljy.dalxId = row.dalxId;
                    vue.$data.ids.push(row.id);
                }
            });
            // 取消选中行时触发
            $('#userTable').on('uncheck.bs.table', function (e, row) {
                if (row != undefined) {
                    if (vue.$data.ids.length > 0) {
                        for(var m = 0;m<vue.$data.ids.length;m++){
                            if (vue.$data.ids[m] != undefined && row.id == vue.$data.zjIds[m]) {
                                vue.$data.ids.splice(m,1); // 删除元素并已undefined代替（方法固有）
                            }
                        }
                    }
                }
            });
        }
    });


</script>

</body>
</html>
